<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <title>vConsole: in Vue</title>
  <link href="./lib/weui.min.css" rel="stylesheet"/>
  <link href="./lib/demo.css" rel="stylesheet"/>

  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
  <script src="../dist/vconsole.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body ontouchstart>
  <div class="page">
    <div id="app">
      <input v-model="book.title" placeholder="Edit me" />
      <div>
        <a @click="changeMethod" href="javascript:;" class="weui_btn weui_btn_default">changeMethod</a>
        <a v-if="method=='post'" @click="axios('POST')" href="javascript:;" class="weui_btn weui_btn_default">Axios POST</a>
        <a v-else @click="axios('GET')" href="javascript:;" class="weui_btn weui_btn_default">Axios GET</a>
      </div>
      <div>
        <router-link to="/" class="weui_btn weui_btn_default">Go to Home</router-link>
        <router-link to="/about" class="weui_btn weui_btn_default">Go to About</router-link>
      </div>
    </div>
  </div>
</body>
</html>

<script>
// import '../dist/vconsole.min.js';

window.vConsole = new window.VConsole({
  maxLogNumber: 1000,
  // disableLogScrolling: true,
  onReady: function() {
    console.log('vConsole is ready.');
  },
  onClearLog: function() {
    console.log('on clearLog');
  }
});
</script>

<script>
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];
const router = VueRouter.createRouter({
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
});

const appOptions = {
  data() {
    return {
      book: {
        title: 'vConsole with Vue',
        // that: this,
        // window: window,
      },
      method: 'post',
    };
  },
  watch: {
    'book.title': function (newVal, oldVal) {
      console.log('book.title', newVal, oldVal, this);
    },
  },
  mounted() {
    // console.log('mounted', this);
    // console.log('Vue', Vue);
    // console.log('Window', window);
    // console.log(this.$route);
    // console.log(this.book);
    setTimeout(() => {
      // console.log(window.vueApp);
      console.log(typeof window.vueVm);
    }, 100);
    // setInterval(() => {
      // this.book.title = Math.random();
      // console.log(this);
      // this.axios('POST');
    // }, 300);
  },
  methods: {
    axios(method) {
      axios({
        method,
        url: './data/success.json?r=' + Math.random(),
        headers: { 'content-type': 'application/x-www-form-urlencoded' },
        data: {
          foo: 'bar'
        }
      })
      .then(function(response) {
        console.log('Axios Get response:', response);
      })
      .catch(function(error) {
        console.log('Axios Get error:', error);
      });
    },
    changeMethod() {
      this.method = this.method == 'post' ? 'get' : 'post';
      console.log('changeMethod()', this);
    },
  }
};
const app = Vue.createApp(appOptions);
app.use(router);
const vm = app.mount('#app');

window.vueApp = app;
window.vueVm = vm;
</script>